<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>MiniVue-Demo</title>
</head>
</html>
<body>
   <div id="app"> 
        <p>姓名：{{name}} {{obj.a.msg}}</p>
        <p>年龄：{{age}}</p>
        <p>地址: {{address}}</p>
        <button @click="increase">年龄+1</button>
        <input v-model="age" :name="name"> <br>
        <textarea v-model="select"></textarea>
        <select multiple="multiple" v-model="select">
            <option value="v1">0</option>
            <option value="v2">1</option>
            <option value="v3">2</option>
            <option value="v4">3</option>
        </select>
        <br>
        <br>
        <button @click="sayHi">sayHi</button>
        <br>
        <br>
        <label>
            <input type="radio" name="good" value="r1" v-model="pick">
            test1
        </label>
        <label>
            <input type="radio" name="good" value="r2" v-model="pick">
            test2
        </label>
        <label>
            <input type="radio" name="good" value="r3" v-model="pick">
            test3
        </label>
        <input v-model="pick">

        <br>
        <br>
        <input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
        <label for="jack">c1</label>
        <input type="checkbox" id="john" value="John" v-model="checkedNames">
        <label for="john">c2</label>
        <input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
        <label for="mike">c3</label>
        <br>
        <span>Checked names: {{ checkedNames }}</span>

        <p v-text="name"></p>
        <p v-html="html"></p>
        <p v-show="show">这是一个v-show示例</p>

        <p v-if="if" el=1>{{address[0]}}</p>
        <p v-else el=2>{{address[1]}}</p> 

        <ul id="for">
            <li v-for="item in address">
                {{ item }}

                <p v-text="name"></p>
            </li>
        </ul>

        <button @click="reset">回复</button>
        <p v-my-directive="name">新指令</p>
        <p @click="sayHi">{{comTest}}</p>
        <p v-my-plugin="newAge">my-plugin</p>
        <my-component :name="obj" @send="sayTest">
            <template slot="header">
                <h1>有名字的slot</h1>
            </template>
            <template>
                <h1>没名字的slot</h1>
            </template>
        </my-component>

        <p v-text="obj.a.msg | capitalize | endding">abc</p>
        <p>{{obj.a.msg | capitalize}}</p>
        <p :name="obj.a.msg | capitalize">haha</p>
    </div>
</body>
<script>
    const objd = {
        bind() {
            console.log('bind')
        },
        update(value) {
            console.log('update' + value)
        },
        unbind() {
            console.log('unbind')
        }
    }

    // 注册全局指令
    MiniVue.directive('my-directive', objd)

    MiniVue.mixin({
        methods: {
            mix() {
                console.log('一个测试函数')
            }
        }
    })

    const obj = {
        props: ['name'],
        data() {
            return {
                content: '这是一个子组件'
            }
        },
        directives: {
            'my-directive': objd
        },
        template: '\
                    <div class="blog-post">\
                        <p @click="test">{{content}}</p>\
                        <p>{{name.a.msg}}</p>\
                        <slot name="header"></slot>\
                        <p v-my-directive="content">新指令</p>\
                        <slot></slot>\
                    </div>',
        methods: {
            test() {
                this.$emit('send', 'haha')
            }
        }
    }


    MiniVue.filter('endding', function(value) {
        return value + ' endding'
    })

    const MyPlugin = {}

    MyPlugin.install = function (MiniVue, options) {
          // 1. 添加全局方法或属性
          MiniVue.myGlobalMethod = function () {
             console.log('这是一个插件')
          }

          // 2. 添加全局资源
            MiniVue.directive('my-plugin', {
                bind() {
                    console.log('这是一个插件指令')
                },
                update(value) {
                    console.log('新插件' + value)
                },
                unbind() {
                    console.log('unbind')
                }
            })
        }

    MiniVue.use(MyPlugin)

    const vm = new MiniVue({
        el: '#app',
        data: {
            newAge: 20,
            age: 18,
            name: '小马',
            obj: {
                a: {
                    msg: 'abc'
                }
            },
            select: ['v1', 2, 3, 4],
            pick: '',
            checkedNames: [],
            address: ['中国', '天津', '南开'],
            html: '<span style="color:red">这是一段v-html</span>',
            show: 'a',
            newAddress: ['银河', '太阳', '地球'],
            if: true
        },
        // 五个生命周期函数
        init() {
            console.log('init')
        },
        created() {
            console.log('created')
        },
        beforeCompile() {
            console.log('beforeCompile')
        },
        compiled() {
            console.log('compiled')
        },
        destroyed() {
            console.log('destroyed')
        },
        directives: {
            'my-directive': objd
        },
        methods: {
            increase() {
                this.age++
            },
            reset() {
                this.address = ['中国', '天津', '南开']
            },
            sayHi() {
                console.log('父组件有一个自己的sayHi方法')
            },
            sayTest(msg) {
                console.log('hi, '  + msg)
            }
        },
        computed: {
            comTest() {
                return this.age + ' ' + this.name
            }
        },
        filters: {
            capitalize(value) {
                if (!value) {
                    return ''
                }
                value = value.toString()
                return value.charAt(0).toUpperCase() + value.slice(1)
            }
        },
        components: {
            'my-component': obj
        },
        mixin: {
            methods: {
                newMixin() {
                    console.log('newMixin')
                }
            }
        },
        computed: {
            comTest() {
                return this.age + ' ' + this.name
            }
        }
    })
</script>